<template>
  <!-- 个人系统正在审核中及审核通过 -->
  <div class="id-html">
      <mt-header title="证书认证" fixed>
                      <router-link slot="left" to="/user/security">
                      <mt-button icon="back" ></mt-button>
                      </router-link> 
      </mt-header> 
      <div class="id-ft">
      <div class="plate plate-padding plate-identity">
                    <div class="identity-active">
                        <a href="jacascript:;">1.提交证书照片</a>
                    </div>
                    <div class="identity-marginl identity-active">
                        <a href="jacascript:;">2.等待审核</a>
                    </div>
                    <div class="identity-marginl identity-active">
                          <a href="jacascript:;">3.审核结果</a>
                    </div>   
      </div>
      <div class="shenhe-img">
        <img src="~@/assets/fapiao.png"/>
        <div class="shenhe-text">
          <p>审核通过</p>
        </div>
      </div>
     
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
// 头部
.mint-header {
  background: white;
  color: #282828;
  font-size: 18px;
  height: 44px;
  border-bottom: 1px solid #f4f4f4;
    a{
      display: block;
    }
}
.id-ft{
  padding: 15px 12px;
  height: 736px;
}
// 认证进程
.plate-identity {
  width: 100%;
  padding: 0;
  border-bottom: 0;
  display: flex;
  margin-top:42px;
}
 .plate-identity div {
  position: relative;
  height: 40px;
  flex-direction: row;
  padding-right: 20px;
  background-color: #f0f0f0;
  text-align: center;
  
}
.plate-identity div {
  &:first-child {
    flex: 0 0 44%;
  }
  &:nth-child(2) {
    flex: 0 0 30%;
    a {
      padding-left:10px;
      &:after{
        right:-5px;
      }
    }
  }
  &:last-child {
    flex: 0 0 26%;

  }
}
 .plate-identity div a {
  display: block;
  // padding: 0px 20px;
  color: #999;
  height: 40px;
  line-height: 40px;
  background-color: #f0f0f0;
  font-size:12px;
}
 .plate-identity div a:after {
  content: '';
  position: absolute;
  top: -2px;
  right: 0;
  display: block;
  height: 40px;
  width: 40px;
  background-color: #f0f0f0;
  border-right: 4px solid #fff;
  border-top: 4px solid #fff;
  transform: scale(0.707) rotate(45deg);
  box-sizing: content-box;
  border-top-left-radius: 6px;
  border-bottom-right-radius: 5px;
  overflow: hidden;
  z-index: 1;
}
 .plate-identity .identity-active {
  color: #fff;
}
 .plate-identity .identity-active a {
  background-color: #3887fe;
  color: #fff;
  padding-right: 15px;
}
 .plate-identity .identity-active a:after {
  background-color: #3887fe;
}
 .plate-identity .identity-marginl a {
  margin-left: -20px;
}
 .plate-identity > div:last-child {
  padding-right: 0;
}
 .plate-identity > div:last-child a:after {
  display: none;
}

// 审核图片
.shenhe-img{
  width: 111px;
  height: 111px;
  margin:184px auto;
  img{
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
  }
}
.shenhe-text{
  font-size: 14px;
  color:#999999;
  text-align: center;
}
</style>
